/**
 * Created by wangzilong on 2017/4/11.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    TextInput,
    ListView,
    Modal,
    Platform
} from 'react-native';
import ImageWrapper from '../components/ImageWrapper';
import NavigationBar from '../components/NavigationBar';
import userService from '../lib/services/userService';
import StorageUser from '../lib/plugins/StorageUser';
var Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');

export default class AddFriend extends Component{
    constructor(props) {
        super(props);
        this.state = {
            showDelete:false,
            inputText:'',
            friendId:this.props.navigation.state.params.friendId,
            token:this.props.navigation.state.params.token,
            userName:'',
        }; 
    }
    componentDidMount() {
        var $this = this;
        StorageUser._getUser()
            .then(data=>{
                if(data.userName){
                    $this.setState({
                        userName:data.userName
                    })
                }               
            }).catch(err=> {
                console.log(err)
            });
    }

    render(){
        return (
            <View style={styles.container}>
                <NavigationBar 
                    leftIcon={'left'} 
                    titleText={'好友验证'} 
                    leftPress={()=>this.goBack()}
                    rightText={'发送'}
                    rightTextStyle={{color:'#fff'}}
                    rightTextPress={()=>this.sendMessage()}/>
                <View style={{height:30,justifyContent:'center'}}>
                    <Text  style={{color:'#aaa'}}>您需要发送验证消息，等待对方通过</Text>
                </View>
                <View>
                    <TextInput 
                        style={{borderWidth:1,borderColor:'#bbb',backgroundColor:'#fff',borderRadius:3,height:40,paddingRight:40}}
                        ref='input'
                        onFocus={()=>this.inputFocus()}
                        onChangeText={(text)=>this.getText(text)}
                        underlineColorAndroid={'transparent'}
                        defaultValue={this.state.userName+'想添加您为好友'}/>
                    {this.state.showDelete?<TouchableOpacity onPress={()=>this.clearText()} style={{position:'absolute',top:10,right:10}}>
                        <ImageWrapper icon={'iconDelete'}/>
                    </TouchableOpacity>:<View></View>}
                </View>
            </View>
        )

    }
    // 返回按钮
    goBack(){
        this.props.navigation.goBack();
    }
    // 清空输入框的内容
    clearText(){
        this.refs.input.clear();
        this.setState({
            showDelete:false
        })
    }
    // 发送按钮点击事件
    sendMessage(){
        var $this = this;
        // alert(this.state.friendId)
        userService.addFriend(function(data){
            // alert(JSON.stringify(data));
            if(data.code==10000){
                alert('发送成功！')
            }else{
                alert('发送失败！')
            }
        },$this.state.friendId,$this.state.inputText,$this.state.token)
    }
    // 输入框获取焦点事件
    inputFocus(){
        this.setState({
            showDelete:true
        })
    }
    // 获取输入框的内容
    getText(text){
        if(text==''){
            this.setState({
                showDelete:false
            })
        }else{
            this.setState({
                showDelete:true,
                inputText:text
            })
        }
    }
}


const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#EFEFF4',
        ...Platform.select({
            ios: {
                marginTop: 20
            },
            android: {
                marginTop:0
            },

        }),
    },
    
    
});